{% load static %}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单</title>
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
    <script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
</head>

<body>
<form class="layui-form" action="">
    <!--
    <div class="layui-form-item">
        <label class="layui-form-label">班级名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">教师名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    -->
    <div class="layui-input-block" style="width: 200px;float: left;">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字" autocomplete="off"
               class="layui-input">
    </div>
    <div class="layui-inline" style="width: 100px;float: left;">
        <button type="button" id="find" class="layui-btn">查找</button>
    </div>
</form>
<button type="button" id="add-btn" class="layui-btn">添加</button>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;

        table.render({
            elem: '#test'
            , url: "{% url 'corp:get_booking_info' %}"
            , cols: [[

                {type: 'checkbox'}, {type: 'numbers'}
                , {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'price', width: 80, title: '价格', sort: true}
                , {fixed: 'right', width: 350, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true
        });

        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log(data);
            if (layEvent === 'detail') { //查看行程
                //do somehing
                layer.open({
                    type: 2,
                    title: '🔑 行程信息',
                    closeBtn: 1,
                    // resize:false,
                    scrollbar: false,
                    area: ['550px', '342px'],
                    shadeClose: true,
                    content: "{% url 'corp:booking_detail' %}?booking_id=" + data.id
                });
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "{% url 'corp:booking_manage' %}",
                        type: 'post',
                        data: {
                            code: 200,
                            id: data.id,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data.status);
                        },
                        error: function (data) {
                            alert('无法连接后台');
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 2,
                    title: '🔑 编辑信息',
                    closeBtn: 1,
                    // resize:false,
                    scrollbar: false,
                    area: ['550px', '342px'],
                    shadeClose: true,
                    content: "{% url 'corp:edit_booking' %}?booking_id=" + data.id
                });
                //同步更新缓存对应的值
                /*
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });*/
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            } else if (layEvent === 'add-tour') {// 添加行程
                layer.open({
                    type: 2,
                    title: '🔑 添加行程',
                    closeBtn: 1,
                    // resize:false,
                    scrollbar: false,
                    area: ['550px', '342px'],
                    shadeClose: true,
                    content: "{% url 'corp:add_tour' %}?booking_id=" + data.id
                });
            } else if (layEvent === 'guests-detail') {
                layer.open({
                    type: 2,
                    title: '🔑 顾客信息',
                    closeBtn: 1,
                    // resize:false,
                    scrollbar: false,
                    area: ['550px', '342px'],
                    shadeClose: true,
                    content: "{% url 'corp:guests_detail' %}?booking_id=" + data.id
                });
            }
            /*
            else if (layEvent == 'check') { //审核按钮
                //let newState = '';
                $.ajax({
                    type: 'post',








            {#url: "{% url 'myAdmin:check_application' %}",#}
                    data: {
                        id: data.id,
                        username: data.applicant_name,
                        identity: data.identity,
                        state: data.state,








            {#csrfmiddlewaretoken: '{{ csrf_token }}',#}
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.status);
                        //newState = data.state;
                    },
                    error: function (data) {
                        alert('无法连接后台');
                    }
                });
                //同步更新缓存
                obj.del();//删除对应行
            }*/
        });

        // 增加订单按钮
        let addBtn = document.getElementById('add-btn');
        addBtn.onclick = function (e) {
            layer.open({
                type: 2,
                title: '🔑 新增订单',
                closeBtn: 1,
                // resize:false,
                scrollbar: false,
                area: ['550px', '430px'],
                shadeClose: true,
                content: "{% url 'corp:add_booking' %}"
            });
        }
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看行程</a>
    <a class="layui-btn layui-btn-xs" lay-event="guests-detail">查看顾客</a>

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="add-tour">添加行程</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!---<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>-->
</script>
</body>

</html>